<template>
<el-form >
  <el-form-item label="标题">

    <el-input v-model="title"></el-input>
  </el-form-item>
  <el-form-item label="简介">

    <el-input v-model="description"></el-input>
  </el-form-item>
  <el-form-item>

    <mavon-editor v-model="content" ></mavon-editor>
  </el-form-item>


    <el-button @click="submitForm">创建</el-button>

</el-form>
{{tags}}


  <el-select
    v-model="choosetags"
    multiple
    placeholder="Select"
    style="width: 240px"
  >
    <el-option
      v-for="item in tags"
      :key="item.tagid"
      :label="item.name"
      :value="item.tagid"
    />
  </el-select>

  <el-input v-model="newtags" placeholder="输入新的标签"></el-input>
  <el-button type="primary" @click="addnewtag">添加标签</el-button>
</template>

<script>
import {createArticle} from "@/api/article";
import {getTags,addTagsArticle} from '@/api/tag'
import { toRaw } from 'vue'
import { createTag } from '../../api/tag'

export default {
  name: "BlogCreate",
data() {
    return{
      title:'',
     description:'',
      content:'',
      tags:[],
      choosetags:[],
      newtags:''
    }
},
  methods:{
    submitForm(){
      let data={
        title:this.title,
        description:this.description,
        content:this.content
      }
      let that=this
      createArticle(data).then(res=>{
        console.log(res.data)
        let tags={
          articleid:res.data,
          tag:that.choosetags

        }
        addTagsArticle(tags).then(()=>{
          that.$router.push("/article/"+tags.articleid)
        })
        console.log(tags)

      })


    },
    initdata(){
      let that=this
      getTags().then(res=>{
        that.tags=res.data
      }).catch(err=>{
        this.$message({
          type:"warning",
          message:"获取标签失败",
          showClose:true
        })

      })
    },
    addnewtag(){
      let data={
        name:this.newtags
      }
      let that=this
      createTag(data).then(()=>{
        that.initdata()
      })
    }

  },
  mounted () {
    this.initdata()
  }
}
</script>

<style scoped>
.el-input{
  width: auto;
}
</style>
